<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:06:47
 * @LastEditors: daidai
 * @LastEditTime: 2022-03-01 17:55:49
 * @FilePath: \web-pc\src\pages\big-screen\App.vue
-->
<template>
	<div class="page">
		<!--头部区域<-->
		<div class="h-main">
			<div id="header">
				<pre>╲╱</pre>
			</div>
		</div>
		<!-- 内容 -->
		<div id="wrap">
			<div class="barrage">
				<marquee class="danmu" v-for="(item, index) in 6"><strong>批里批里 (゜-゜)つロ
						乾杯~-pilipili</strong></marquee>
			</div>
			<!-- <div id="app"> -->
			<router-view />
			<!-- </div> -->
		</div>
		<!--尾部区域-->
		<div class="f-main">
			<div id="footer">
				<pre>∪      ∪</pre>
			</div>
		</div>
		<div class="df jcc">
			<a href="https://beian.miit.gov.cn/" class="font-weight-bold mb-2 font-sm" target="_blank">闽ICP备2023001789号</a>
		</div>
	</div>

</template>

<style lang="scss" scoped>
	.danmu {
		margin-bottom: 100px;
		font-size: 25px;
		// color: #0072FF;
		-webkit-text-fill-color:transparent;
		-webkit-text-stroke:2px #0072FF;
	}

	.barrage {
		position: absolute;
		pointer-events: none;
		z-index: 999;
	}

	#app {
		width: 100vw;
		height: 100vh;
		background-color: #03050C;
		overflow: hidden;
	}

	.page {
		overflow: hidden;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/*全局样式*/
	* {
		margin: 0;
		padding: 0;
	}

	/*头部样式*/
	.h-main {
		width: 100%;
		display: flex;
		justify-content: center;
		transform: translateY(17px);

		#header {
			margin: 0 auto;
			width: 360px;
			height: 188px;
			user-select: none;

			pre {
				font-size: 180px;
				display: block;
			}
		}
	}

	/*内容样式*/
	#wrap {
		width: 1000px;
		height: 600px;
		margin: 0 auto;
		// background-color: #03050C;
		border: 5px #000 double;
		border-width: 21px;
		overflow: hidden;
		border-radius: 5%;
		position: relative;
	}

	#wrap ul li #wrap ul li span #wrap ul li #wrap img:hover {
		/*box-shadow:0 20px 20px #ccc;*/
		top: -5px;
		transition: all 0.6s ease;
	}

	/*尾部样式*/
	.f-main {
		width: 100%;
		height: 80px;
		position: relative;

		#footer {
			user-select: none;
			margin: -41px auto;
			width: 658px;
			height: 80px;

			pre {
				font-size: 130px;
				display: block;
			}
		}
	}
</style>